<div
  *ngIf="hasContent"
  class="clearfix vh-100 overflow-hidden flex flex-column"
  [ngClass]="options.theme === Theme.Dark ? 'dark' : 'light'"
>
  <div class="vh-100" *ngIf="error">
    <render-error (reportError)="onReportError()" (refresh)="onRefresh()" [error]="error"></render-error>
  </div>
  <bt-app-trees
    #trees
    *ngIf="error === null"
    class="flex flex-column flex-auto"
    [ngVersion]="ngVersion"
    [componentState]="componentState"
    [selectedTab]="selectedTab | async"
    [selectedComponentsSubTab]="selectedComponentsSubTab | async"
    [selectedNode]="selectedNode"
    [domSelectionActive]="domSelectionActive | async"
    [routerTree]="routerTree"
    [ngModules]="ngModules"
    [options]="options"
    [tree]="tree"
    (tabChange)="onSelectedTabChange($event)"
    (componentsSubTabMenuChange)="onSelectedComponentsSubTabMenuChange($event)"
    (domSelectionActiveChange)="onDOMSelectionActiveChange($event)"
    (selectNode)="onSelectNode($event)"
    (inspectElement)="onInspectElement($event)"
    (collapseChildren)="onCollapseChildren($event)"
    (expandChildren)="onExpandChildren($event)"
    (emitValue)="onEmitValue($event)"
    (updateProperty)="onUpdateProperty($event)"
    (refresh)="onRefresh()"
  >
  </bt-app-trees>
</div>
<ng-template [ngIf]="!hasContent">
  No components were found on the page
</ng-template>
